window.onload = function () {
            var ul = document.getElementsByClassName("banner")[0];
            // 轮播图
            var liArr = ul.children;
            var number = document.getElementsByClassName("number")[0];
            // 焦点按钮
            var inner = document.getElementsByClassName("inner")[0];
            var span_box = document.getElementsByClassName("span_box")[0];
            // 左右按钮
            var spanArr = span_box.children;
            // 记录左右按钮的索引
            var num = 0;
            // 记录焦点的索引
            var span_key = 0;
            // 定时器
            var timer = null;
            // 复制假的第一张出来
            var colLi = liArr[0].cloneNode(true);
            // 添加到ul的最后面，并且增加ul的宽度到3000px
            ul.appendChild(colLi);
            inner.onmouseover = function () {
                span_box.style.display = "block";
                clearInterval(timer);
            }
            inner.onmouseout = function () {
                // span_box.style.display = "none";
                autoScroll();
            }
            spanArr[0].onclick = function () {
                scrollLeft();
            }
            spanArr[1].onclick = function () {
                scrollRight();
            }
            autoScroll();
            function scrollLeft() {
                num--;
                // 如果现在是第一张图片，摁左按钮闪现到假的第一张
                if(num<0){
                    // 闪现到假的第一张
                    ul.style.left = -(liArr.length-1)*inner.offsetWidth+"px";
                    // 然后给num设置值为4
                    num = liArr.length-2;
                }
                // 切换到第五张图片
                animate(ul,-num*inner.offsetWidth);

            }
            function scrollRight() {
                num++;
                // 如果图片切换到假的第一张
                if(num>liArr.length-1){
                    // 瞬间闪现到真的第一张
                    ul.style.left = "0px";
                    // 当前的num值为1，为了能继续切换到第二张
                    num = 1;

                }
                animate(ul,-num*inner.offsetWidth);

            }
            // 轮播图自动滚动
            function autoScroll() {
                timer = setInterval(function () {
                    scrollRight();
                },5000);

            }
            // 匀速动画
            function animate(ele,target) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    var step = (target-ele.offsetLeft) > 0 ? 10 : -10;
                    if(Math.abs(target-ele.offsetLeft)<=step){
                        clearInterval(ele.timer);
                        ele.style.left = target+"px";
                    }else{
                        ele.style.left = ele.offsetLeft+step+"px";
                    }

                },20);
            }
        }